Reactã®å®éšçããã¯experimental_useFormStatusã培åºè§£èª¬ãå ç¢ãªãã©ãŒã ãšã©ãŒåŠçãé信远跡ãUXåäžãå®çŸããé«èæ§ã§äœ¿ãããããã©ãŒã ãæ§ç¯ããæ¹æ³ãåŠã³ãŸãã
React experimental_useFormStatus: ãã©ãŒã ãšã©ãŒç¶æ 远跡ã®å®å šãã¹ã¿ãŒ
é²åãç¶ããReactã®ãšã³ã·ã¹ãã ã§ã¯ãéçºãç°¡çŽ åããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããããã®æ©èœãç¶ç¶çã«å°å
¥ãããŠããŸãããã®ãããªæè¿ã®è¿œå æ©èœã®äžã€ããçŸåšå®éšç段éã«ããexperimental_useFormStatusããã¯ã§ãããã®åŒ·åãªããŒã«ã¯ããã©ãŒã éä¿¡ã®ç¶æ
ïŒãšã©ãŒã¹ããŒããå«ãïŒãReactã³ã³ããŒãã³ãå
ã§çŽæ¥è¿œè·¡ããããã®åççãªæ¹æ³ãæäŸããŸãããã®ããã°èšäºã§ã¯ãexperimental_useFormStatusãçè§£ããå
ç¢ã§ãŠãŒã¶ãŒãã¬ã³ããªãŒãªãã©ãŒã ãæ§ç¯ããããã«å¹æçã«æŽ»çšããããã®å
æ¬çãªã¬ã€ããæäŸããŸãã
experimental_useFormStatusãå¿
èŠãšãããèæ¯
åŸæ¥ãReactã§ãã©ãŒã éä¿¡ã管çããã«ã¯ãããªãã®éã®å®åã³ãŒããå¿ èŠã§ãããéçºè ã¯éä¿¡ç¶æ ïŒä¿çãæåããšã©ãŒïŒãæåã§è¿œè·¡ãããšã©ãŒã¡ãã»ãŒãžãåŠçããããã«å¿ããŠUIãæŽæ°ããå¿ èŠããããŸãããããã¯ãç¹ã«è€æ°ã®æ€èšŒã«ãŒã«ãéåææäœãæã€è€éãªãã©ãŒã ã§ã¯ãè€éã§ãšã©ãŒãèµ·ãããããã³ãŒãã«ã€ãªããå¯èœæ§ããããŸããã
experimental_useFormStatusã¯ããã©ãŒã éä¿¡ç¶æ
ã管çããããã®äžå
çãã€å®£èšçãªæ¹æ³ãæäŸããããšã§ããã®èª²é¡ã«å¯ŸåŠããŸããããã«ããããšã©ãŒã®è¿œè·¡ãããŒãç¶æ
ã®è¡šç€ºããŠãŒã¶ãŒãžã®ãã£ãŒãããã¯æäŸã®ããã»ã¹ãç°¡çŽ åãããããã¯ãªãŒã³ã§ä¿å®æ§ãé«ããããã©ãŒãã³ã¹ã®è¯ãã³ãŒããå®çŸããŸãã
experimental_useFormStatusãšã¯ïŒ
experimental_useFormStatusããã¯ã¯ããã©ãŒã éä¿¡ã®ç¶æ
ã«é¢ããæ
å ±ãæäŸããããã«ç¹å¥ã«èšèšãããReactããã¯ã§ããããã¯<form>èŠçŽ ã®action屿§ãšãµãŒããŒã¢ã¯ã·ã§ã³ïŒãããæ¯èŒçæ°ããReactã®æ©èœïŒãšé£æºããŠåäœããŸãããµãŒããŒã¢ã¯ã·ã§ã³ãæãactionãæã€ãã©ãŒã ãéä¿¡ããããšãexperimental_useFormStatusã¯ãã®éä¿¡ã®çŸåšã®ç¶æ
ã«é¢ããããŒã¿ãæäŸããŸãã
å ·äœçã«ã¯ããã®ããã¯ã¯ä»¥äžã®ããããã£ãå«ããªããžã§ã¯ããè¿ããŸãïŒ
pending: ãã©ãŒã ã®éä¿¡ãçŸåšé²è¡äžãã©ããã瀺ãããŒã«å€ãdata: ãã©ãŒã ã«ãã£ãŠéä¿¡ãããããŒã¿ãmethod: ãã©ãŒã éä¿¡ã«äœ¿çšãããHTTPã¡ãœããïŒäŸïŒãPOSTãããGETãïŒãaction: ãã©ãŒã éä¿¡ã«ãã£ãŠããªã¬ãŒããããµãŒããŒã¢ã¯ã·ã§ã³ãerror: ãã©ãŒã ã®éä¿¡ã倱æããå Žåã®ãšã©ãŒãªããžã§ã¯ãããã®ãªããžã§ã¯ãã«ã¯ããµãŒããŒã§çºçãããšã©ãŒã«é¢ããæ å ±ãå«ãŸããŸãã
experimental_useFormStatusã®äœ¿ç𿹿³
experimental_useFormStatusã®äœ¿ç𿹿³ã説æããããã«ãå®è·µçãªäŸãèŠãŠãããŸããããååãã¡ãŒã«ã¢ãã¬ã¹ãã¡ãã»ãŒãžã®ãã£ãŒã«ããæã€ç°¡åãªé£çµ¡ãã©ãŒã ãäœæãããã®ããã¯ã䜿çšããŠããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ãŒããšã©ãŒã¡ãã»ãŒãžã衚瀺ããæ¹æ³ã宿ŒããŸãã
åææ¡ä»¶
å§ããåã«ãReactãããžã§ã¯ããã»ããã¢ãããããŠãããå®éšçæ©èœããµããŒãããReactã®ããŒãžã§ã³ã䜿çšããŠããããšã確èªããŠãã ãããreact.config.jsãã¡ã€ã«ïŒãŸãã¯ãã«ãããŒã«ã«çžåœããèšå®ãã¡ã€ã«ïŒã§å®éšçæ©èœãæå¹ã«ããå¿
èŠããããããããŸããããŸãããã©ãŒã éä¿¡ãåŠçããé©åãªã¬ã¹ãã³ã¹ãè¿ãããã®ããã¯ãšã³ãïŒäŸïŒNode.jsãšExpressïŒãèšå®ãããŠããããšã確èªããŠãã ããã
äŸïŒãåãåãããã©ãŒã
以äžã«Reactã³ã³ããŒãã³ãã®ã³ãŒãã瀺ããŸãïŒ
import React, { useState } from 'react';
import { experimental_useFormStatus as useFormStatus } from 'react-dom';
async function handleSubmit(formData) {
'use server';
try {
const response = await fetch('/api/contact', {
method: 'POST',
body: formData,
});
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.message || 'Form submission failed');
}
// Handle successful submission (e.g., redirect, show success message)
console.log('Form submitted successfully!');
// In a real application, you might redirect or update state here
return { success: true, message: 'Form submitted successfully!' };
} catch (error) {
console.error('Error submitting form:', error);
return { success: false, message: error.message };
}
}
function ContactForm() {
const [formData, setFormData] = useState({
name: '',
email: '',
message: '',
});
const { pending, data, error } = useFormStatus();
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
return (
);
}
export default ContactForm;
解説
useFormStatusã®ã€ã³ããŒãïŒreact-domããexperimental_useFormStatusããã¯ãã€ã³ããŒãããŸããããã¯å®éšçãªæ©èœã§ãããããå°æ¥ã®ReactããŒãžã§ã³ã§ã¯ã€ã³ããŒããã¹ã倿Žãããå¯èœæ§ãããããšã«æ³šæããŠãã ããã- ãã©ãŒã ã®ç¶æ
ïŒ
useStateã䜿çšããç¶æ 倿°formDataãããŠãŒã¶ãŒã«ãã£ãŠå ¥åãããååãã¡ãŒã«ã¢ãã¬ã¹ãã¡ãã»ãŒãžã远跡ããŸãã useFormStatusããã¯ïŒ ã³ã³ããŒãã³ãå ã§useFormStatus()ãåŒã³åºããŸãããã®ããã¯ã¯ããã©ãŒã ããµãŒããŒã¢ã¯ã·ã§ã³ãéããŠéä¿¡ããããšãã«ããã©ãŒã ã®éä¿¡ç¶æ ã«é¢ããæ å ±ãèªåçã«æäŸããŸãã- ç¶æ
ããããã£ãžã®ã¢ã¯ã»ã¹ïŒ
useFormStatus()ããè¿ããããªããžã§ã¯ãããpendingãdataãerrorãæœåºããŸãã - ããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ãŒïŒ
pendingããŒã«å€ã䜿çšããŠãéä¿¡ãã¿ã³ã«ãéä¿¡äž...ããšããã¡ãã»ãŒãžãæ¡ä»¶ä»ãã§ã¬ã³ããªã³ã°ããè€æ°åã®éä¿¡ãé²ãããã«ãã¿ã³ãç¡å¹åããŸãã - ãšã©ãŒãã³ããªã³ã°ïŒ ãã©ãŒã éä¿¡äžã«ãšã©ãŒãçºçããå ŽåïŒ
errorããããã£ã«ãã£ãŠç€ºãããïŒããŠãŒã¶ãŒã«ãšã©ãŒã¡ãã»ãŒãžã衚瀺ããŸãã - æåã¡ãã»ãŒãžïŒ éä¿¡ãæåããå ŽåïŒãµãŒããŒã¢ã¯ã·ã§ã³ã{ success: true, message: '...' }ãè¿ãããšã§å€æïŒãæåã¡ãã»ãŒãžã衚瀺ããŸãã
- ãµãŒããŒã¢ã¯ã·ã§ã³ïŒ
handleSubmit颿°ã¯'use server'ã§ããŒã¯ãããŠããããµãŒããŒã¢ã¯ã·ã§ã³ã«ãªããŸããããã¯fetchã䜿çšããŠãã©ãŒã ããŒã¿ãAPIãšã³ããã€ã³ãïŒ/api/contactïŒã«éä¿¡ããŸãã - ãµãŒããŒã¢ã¯ã·ã§ã³å
ã®ãšã©ãŒãã³ããªã³ã°ïŒ ãµãŒããŒã¢ã¯ã·ã§ã³ã¯APIåŒã³åºããšæœåšçãªãšã©ãŒãåŠçããããšããŸããAPIã¬ã¹ãã³ã¹ã«ãšã©ãŒãããããäŸå€ãçºçããå Žåã
{ success: false, message: '...' }ãè¿ããŸãããã®ã¡ãã»ãŒãžã¯ãuseFormStatusããã¯ã®errorããããã£ã§å©çšå¯èœã«ãªããŸãã - Action屿§ïŒ
<form>ã¿ã°ã®action屿§ã¯handleSubmitãµãŒããŒã¢ã¯ã·ã§ã³ã«èšå®ãããŸããããã«ããããã©ãŒã ãéä¿¡ããããšãã«ãã®é¢æ°ã䜿çšããããã«Reactã«æç€ºããŸãã
ããã¯ãšã³ãïŒNode.jsãšExpressã䜿çšããç°¡æäŸïŒ
以äžã¯ããã©ãŒã éä¿¡ãåŠçããããã®Expressã䜿çšããNode.jsãµãŒããŒã®éåžžã«åºæ¬çãªäŸã§ãïŒ
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
const port = 3001;
app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.post('/api/contact', (req, res) => {
const { name, email, message } = req.body;
// Simulate server-side validation or processing (e.g., sending an email)
if (!name || !email || !message) {
return res.status(400).json({ message: 'All fields are required.' });
}
if (!email.includes('@')) {
return res.status(400).json({message: 'Invalid email format.'});
}
// Simulate a successful operation with a delay
setTimeout(() => {
console.log('Form data received:', { name, email, message });
res.status(200).json({ message: 'Form submitted successfully!' });
}, 1000);
});
app.listen(port, () => {
console.log(`Server listening at http://localhost:${port}`);
});
ããã¯ãšã³ãã«é¢ããäž»èŠãªèæ ®äºé ïŒ
- ããªããŒã·ã§ã³ïŒ ããŒã¿ã®æŽåæ§ãšã»ãã¥ãªãã£ã確ä¿ããããã«ãåžžã«ãµãŒããŒãµã€ãã§ããªããŒã·ã§ã³ãè¡ã£ãŠãã ããã
- ãšã©ãŒãã³ããªã³ã°ïŒ äºæãã¬åé¡ããã£ããããã¯ã©ã€ã¢ã³ãã«æå³ã®ãããšã©ãŒã¡ãã»ãŒãžãè¿ãããã«ãå ç¢ãªãšã©ãŒãã³ããªã³ã°ãå®è£ ããŠãã ããã
- ã»ãã¥ãªãã£ïŒ ã¯ãã¹ãµã€ãã¹ã¯ãªããã£ã³ã°ïŒXSSïŒãSQLã€ã³ãžã§ã¯ã·ã§ã³ãªã©ã®ã»ãã¥ãªãã£è匱æ§ãé²ãããã«ããã¹ãŠã®å ¥åããŒã¿ããµãã¿ã€ãºããæ€èšŒããŠãã ããã
- CORSïŒ Reactã¢ããªã±ãŒã·ã§ã³ã®ãã¡ã€ã³ããã®ãªã¯ãšã¹ããèš±å¯ããããã«ããªãªãžã³éãªãœãŒã¹å ±æïŒCORSïŒãé©åã«èšå®ããŠãã ããã
- JSONã¬ã¹ãã³ã¹ïŒ é©åãªHTTPã¹ããŒã¿ã¹ã³ãŒãïŒäŸïŒæåã®å Žåã¯200ãã¯ã©ã€ã¢ã³ããšã©ãŒã®å Žåã¯400ããµãŒããŒãšã©ãŒã®å Žåã¯500ïŒãšå ±ã«JSONã¬ã¹ãã³ã¹ãã¯ã©ã€ã¢ã³ãã«è¿ããŠãã ããã
experimental_useFormStatusã䜿çšããã¡ãªãã
- ç°¡çŽ åããããã©ãŒã 管çïŒ ãã©ãŒã éä¿¡ç¶æ ã®äžå 管çã«ãããå®åã³ãŒããåæžãããã³ãŒãã®å¯èªæ§ãåäžããŸãã
- ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäžïŒ ãã©ãŒã éä¿¡ç¶æ ã«é¢ãããªã¢ã«ã¿ã€ã ã®ãã£ãŒãããã¯ïŒããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ãŒããšã©ãŒã¡ãã»ãŒãžïŒã«ããããŠãŒã¶ãŒãšã³ã²ãŒãžã¡ã³ããåäžãããã©ã¹ãã¬ãŒã·ã§ã³ã軜æžãããŸãã
- 匷åããããšã©ãŒãã³ããªã³ã°ïŒ 詳现ãªãšã©ãŒæ å ±ãžã®ã¢ã¯ã»ã¹ã容æã«ãªãããšã§ãããçãçµã£ããšã©ãŒãã³ããªã³ã°ãšãããã°ã®æ¹åãå¯èœã«ãªããŸãã
- 宣èšçã¢ãããŒãïŒ ãã®ããã¯ã¯ãã©ãŒã ã®ç¶æ ã管çããããã®å®£èšçãªæ¹æ³ãæäŸããã³ãŒããããäºæž¬å¯èœã§çè§£ããããããŸãã
- ãµãŒããŒã¢ã¯ã·ã§ã³ãšã®çµ±åïŒ ReactãµãŒããŒã¢ã¯ã·ã§ã³ãšã®ã·ãŒã ã¬ã¹ãªçµ±åã«ãããããŒã¿ã®ååŸãšå€æŽãç°¡çŽ åãããããå¹ççã§ããã©ãŒãã³ã¹ã®é«ãã¢ããªã±ãŒã·ã§ã³ã«ã€ãªãããŸãã
é«åºŠãªäœ¿çšäŸ
åºæ¬çãªäŸãè¶
ããŠãexperimental_useFormStatusã¯ããè€éãªã·ããªãªã§ã䜿çšã§ããŸãïŒ
1. 1ããŒãžã«è€æ°ã®ãã©ãŒã ãæ±ã
1ããŒãžã«è€æ°ã®ãã©ãŒã ãããå Žåãåãã©ãŒã ã¯ç¬èªã®useFormStatusã€ã³ã¹ã¿ã³ã¹ãæã€ãããããããã®éä¿¡ç¶æ
ãç¬ç«ããŠè¿œè·¡ã§ããŸãã
2. ã«ã¹ã¿ã ããªããŒã·ã§ã³ããžãã¯ã®å®è£
useFormStatusãã«ã¹ã¿ã ããªããŒã·ã§ã³ããžãã¯ãšçµ±åããŠãããªããŒã·ã§ã³ãšã©ãŒããªã¢ã«ã¿ã€ã ã§è¡šç€ºã§ããŸããäŸãã°ãYupãZodã®ãããªããªããŒã·ã§ã³ã©ã€ãã©ãªã䜿çšããŠããµãŒããŒã«éä¿¡ããåã«ã¯ã©ã€ã¢ã³ããµã€ãã§ãã©ãŒã ããŒã¿ãæ€èšŒããããšãã§ããŸãããã®åŸããµãŒããŒã¢ã¯ã·ã§ã³ã¯ããã¯ãšã³ãã®ã«ãŒã«ã«åºã¥ããããªããŒã·ã§ã³ãšã©ãŒãè¿ãããšãã§ãããããuseFormStatusã䜿ã£ãŠè¡šç€ºã§ããŸãã
3. ãªããã£ãã¹ãã£ãã¯UIã¢ããããŒã
useFormStatusã䜿çšããŠãªããã£ãã¹ãã£ãã¯UIã¢ããããŒããå®è£
ã§ããŸããããã¯ããŠãŒã¶ãŒããã©ãŒã ãéä¿¡ããçŽåŸã«ãéä¿¡ãæåãããšä»®å®ããŠUIãå³åº§ã«æŽæ°ããææ³ã§ããããéä¿¡ã倱æããå Žåã¯ãUIã以åã®ç¶æ
ã«æ»ãããšã©ãŒã¡ãã»ãŒãžã衚瀺ã§ããŸãã
4. ãã¡ã€ã«ã¢ããããŒãã®é²æã€ã³ãžã±ãŒã¿ãŒ
useFormStatusã¯ãã¡ã€ã«ã¢ããããŒãã®é²ææŽæ°ãçŽæ¥æäŸããŸããããä»ã®æè¡ïŒäŸïŒXMLHttpRequestãªããžã§ã¯ããšãã®upload.onprogressã€ãã³ãã䜿çšããïŒãšçµã¿åãããŠããŠãŒã¶ãŒã«é²æã€ã³ãžã±ãŒã¿ãŒã衚瀺ããããšãã§ããŸãã
ããããèœãšã穎ãšãã®åé¿æ¹æ³
- ãµãŒããŒã¢ã¯ã·ã§ã³ã䜿çšããªãïŒ
experimental_useFormStatusã¯ãäž»ã«ReactãµãŒããŒã¢ã¯ã·ã§ã³ãšé£æºããããã«èšèšãããŠããŸãããµãŒããŒã¢ã¯ã·ã§ã³ã䜿çšããªãå Žåããã©ãŒã ã®éä¿¡ç¶æ ãæåã§ç®¡çããUIãæŽæ°ããå¿ èŠããããããã¯ã䜿çšããç®çã倱ãããŸãã - ãµãŒããŒã§ã®äžé©åãªãšã©ãŒãã³ããªã³ã°ïŒ ãµãŒããŒãµã€ãã®ã³ãŒãããšã©ãŒãé©åã«åŠçããã¯ã©ã€ã¢ã³ãã«æå³ã®ãããšã©ãŒã¡ãã»ãŒãžãè¿ãããšã確èªããŠãã ããã
useFormStatusããã¯ã®errorããããã£ã«ã¯ããµãŒããŒã§çºçãããšã©ãŒã«é¢ããæ å ±ã®ã¿ãå«ãŸããŸãã - æœåšçãªã»ãã¥ãªãã£è匱æ§ã®ç¡èŠïŒ ã»ãã¥ãªãã£è匱æ§ãé²ãããã«ãã¯ã©ã€ã¢ã³ããµã€ããšãµãŒããŒãµã€ãã®äž¡æ¹ã§åžžã«å ¥åããŒã¿ããµãã¿ã€ãºããæ€èšŒããŠãã ããã
- ãŠãŒã¶ãŒãžã®ãã£ãŒãããã¯ãæäŸããªãïŒ ãã©ãŒã ã®éä¿¡ç¶æ ïŒããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ãŒããšã©ãŒã¡ãã»ãŒãžãæåã¡ãã»ãŒãžïŒã«ã€ããŠãæç¢ºã§ã¿ã€ã ãªãŒãªãã£ãŒãããã¯ããŠãŒã¶ãŒã«æäŸããããšãéèŠã§ããããã«ããããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããã©ã¹ãã¬ãŒã·ã§ã³ã軜æžãããŸãã
experimental_useFormStatusã䜿çšããããã®ãã¹ããã©ã¯ãã£ã¹
- æå³ã®ãããšã©ãŒã¡ãã»ãŒãžã䜿çšããïŒ äœãåé¡ã§ãã©ãããã°ä¿®æ£ã§ãããããŠãŒã¶ãŒãçè§£ããã®ã«åœ¹ç«ã€ãæç¢ºã§ç°¡æœãªãšã©ãŒã¡ãã»ãŒãžãæäŸããŠãã ããã
- ã¯ã©ã€ã¢ã³ããµã€ãããªããŒã·ã§ã³ãå®è£ ããïŒ ãµãŒããŒãžã®äžèŠãªãªã¯ãšã¹ããæžããããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããããã«ããµãŒããŒã«éä¿¡ããåã«ã¯ã©ã€ã¢ã³ããµã€ãã§ãã©ãŒã ããŒã¿ãæ€èšŒããŠãã ããã
- ãšã©ãŒãé©åã«åŠçããïŒ äºæãã¬åé¡ããã£ããããã¢ããªã±ãŒã·ã§ã³ãã¯ã©ãã·ã¥ããã®ãé²ãããã«ãå ç¢ãªãšã©ãŒãã³ããªã³ã°ãå®è£ ããŠãã ããã
- ãã©ãŒã ã培åºçã«ãã¹ãããïŒ ããŸããŸãªå ¥åãšã·ããªãªã§ãã©ãŒã ããã¹ãããæ£ããåäœãããšã©ãŒãã³ããªã³ã°ãæåŸ ã©ããã«æ©èœããããšã確èªããŠãã ããã
- ã³ãŒããã¯ãªãŒã³ã§èªã¿ãããä¿ã€ïŒ ã³ãŒããçè§£ãããããä¿å®ããããããããã«ã説æçãªå€æ°åãšã³ã¡ã³ãã䜿çšããŠãã ããã
- ã¢ã¯ã»ã·ããªãã£ãåªå ããïŒ é害ãæã€ãŠãŒã¶ãŒãå«ããã¹ãŠã®ãŠãŒã¶ãŒããã©ãŒã ã«ã¢ã¯ã»ã¹ã§ããããã«ããŠãã ãããã»ãã³ãã£ãã¯ãªHTMLã䜿çšãããã©ãŒã ãã£ãŒã«ãã«é©åãªã©ãã«ãæäŸãããšã©ãŒã¡ãã»ãŒãžãæç¢ºã«è¡šç€ºãããçè§£ã§ããããã«ããŠãã ããã
åœéåã«é¢ããèæ ®äºé
ã°ããŒãã«ãªãŠãŒã¶ãŒåãã«ãã©ãŒã ãæ§ç¯ããå Žåã以äžã®åœéåã®åŽé¢ãèæ ®ããŠãã ããïŒ
- ãšã©ãŒã¡ãã»ãŒãžã®ããŒã«ã©ã€ãºïŒ ãšã©ãŒã¡ãã»ãŒãžããŠãŒã¶ãŒã®åªå
èšèªã«ç¿»èš³ãããŠããããšã確èªããŠãã ããã
i18nextã®ãããªããŒã«ã©ã€ãŒãŒã·ã§ã³ã©ã€ãã©ãªã䜿çšããŠç¿»èš³ã管çã§ããŸãã - æ¥ä»ãšæ°å€ã®ãã©ãŒãããïŒ ãŠãŒã¶ãŒã®ãã±ãŒã«ã«åºã¥ããŠãé©åãªæ¥ä»ãšæ°å€ã®ãã©ãŒãããã䜿çšããŠãã ããã
- äœæãã©ãŒãããïŒ ããŸããŸãªåœã®äœæãã©ãŒãããã«åãããŠäœæãã©ãŒã ã®ãã£ãŒã«ãã調æŽããŠãã ãããäŸãã°ãäžéšã®åœã§ã¯éµäŸ¿çªå·ãéœåžåã®åã«äœ¿çšããŸãããä»ã®åœã§ã¯åŸã«äœ¿çšããŸãã
- é»è©±çªå·ã®ããªããŒã·ã§ã³ïŒ ããŸããŸãªåœã³ãŒããšé»è©±çªå·ãã©ãŒãããããµããŒãããé»è©±çªå·ããªããŒã·ã§ã³ãå®è£ ããŠãã ããã
- å³ããå·ŠïŒRTLïŒã¬ã€ã¢ãŠãïŒ ã¢ã©ãã¢èªãããã©ã€èªã®ãããªèšèªã®ããã«RTLã¬ã€ã¢ãŠãããµããŒãããŠãã ããã
äŸãã°ãé»è©±çªå·ãå°ãããã©ãŒã ã¯ããŠãŒã¶ãŒãéžæããåœã«å¿ããŠããªããŒã·ã§ã³ã«ãŒã«ãåçã«èª¿æŽããå¿ èŠããããŸããç±³åœã®é»è©±çªå·ã¯10æ¡ã®æ°åãèŠæ±ããŸãããè±åœã®é»è©±çªå·ã¯å é ã®ãŒããå«ã11æ¡ãèŠæ±ãããããããŸãããåæ§ã«ããç¡å¹ãªé»è©±çªå·åœ¢åŒã§ããã®ãããªãšã©ãŒã¡ãã»ãŒãžã¯ããŠãŒã¶ãŒã®èšèªã«ç¿»èš³ãããªããã°ãªããŸããã
çµè«
experimental_useFormStatusã¯Reactã®ããŒã«ããããžã®äŸ¡å€ããè¿œå æ©èœã§ããããã©ãŒã éä¿¡ç¶æ
ã管çããããã®åçåããã宣èšçãªæ¹æ³ãæäŸããŸãããã®ããã¯ã掻çšããããšã§ãéçºè
ã¯ããå
ç¢ã§ããŠãŒã¶ãŒãã¬ã³ããªãŒã§ãä¿å®æ§ã®é«ããã©ãŒã ãæ§ç¯ã§ããŸãããã®æ©èœã¯çŸåšå®éšçã§ãããããææ°ã®Reactããã¥ã¡ã³ããšã³ãã¥ããã£ã®ãã¹ããã©ã¯ãã£ã¹ãåžžã«ç¢ºèªããŠãã ããããã®åŒ·åãªããŒã«ã掻çšããŠããã©ãŒã ãã³ããªã³ã°èœåãåäžãããã¢ããªã±ãŒã·ã§ã³ã§åè¶ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåµé ããŠãã ããã